<template>
  <div :class="['execution-color', playing && 'playing']">
    <div class="execution-color__control">
      <g-timer />
      <g-help :content="ins" name="execution_color" />
    </div>
    <div class="execution-color__content">
      <div class="execution-color__header">
        <div class="ec-score">
          <span class="ec-score__text">{{ score }}</span>
          <span class="ec-score__tip">得分</span>
        </div>
        <div class="ec-score">
          <span class="ec-score__text">{{ count }}</span>
          <span class="ec-score__tip">倒计时</span>
        </div>
      </div>
      <div class="flex-1">
        <div class="execution-color__body">
          <div class="ec-title">请选择下面文字的颜色</div>
          <div class="ec-text" :style="{color: right.color}">{{ error.text }}</div>
        </div>
      </div>
      <div class="execution-color__footer">
        <div
          v-for="item in pair"
          :key="item.text + item.color"
          class="ec-btn"
          :style="{color: item.color}"
          @click="choose(item)"
        >{{ item.text }}</div>
      </div>
    </div>

    <fixed-bottom v-show="!playing" text="开始游戏" @click="start" />
  </div>
</template>

<script>
import GTimer from '@/components/GTimer.vue'
import GHelp from '@/components/GHelp.vue'
import FixedBottom from '@/components/FixedBottom/index.vue'
import { genPairs } from './util'
import Taro from '@tarojs/taro'

export default {
  components: {
    GTimer,
    GHelp,
    FixedBottom
  },
  data() {
    return {
      score: 0,
      count: 60,
      right: { text: '', color: '' },
      error: { text: '', color: '' },
      pair: [],
      playing: false,
      timer: null,
      ins: '观察题干中的颜色信息, 然后从两个选项中, 选中与题干颜色信息匹配的文字. 每次游戏时间60秒, 每次答对一题得1分.'
    }
  },
  onLoad() {
    this.next()
  },
  onUnload() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    start() {
      this.count = 60
      this.score = 0
      this.playing = true
      this.timer = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.playing = false
          clearInterval(this.timer)
          Taro.showModal({
            content: `你在60秒内获得了${this.score}分 🎉🎉`,
            showCancel: false
          })
        }
      }, 1000)
    },
    next() {
      const pair = genPairs()
      const index = Math.round(Math.random())
      this.right = pair[index]
      this.error = pair[index === 0 ? 1 : 0]
      this.pair = [
        {
          text: pair[0].text,
          color: pair[1].color
        },
        {
          text: pair[1].text,
          color: pair[0].color
        }
      ]
    },
    choose(item) {
      if (!this.playing) {
        return
      }
      let result = false
      if (this.right.color !== item.color) {
        result = true
        this.score++
      }
      Taro.showToast({
        title: '',
        icon: result ? 'success' : 'error'
      })

      setTimeout(this.next, 1500)
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
